<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D测试页面</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #000;
            overflow: hidden;
        }
        #container {
            width: 100vw;
            height: 100vh;
        }
        #info {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            font-family: Arial, sans-serif;
            z-index: 100;
        }
    </style>
</head>
<body>
    <div id="info">
        <h3>3D测试页面</h3>
        <p>如果看到旋转的立方体，说明Three.js工作正常</p>
    </div>
    <div id="container"></div>

    <script src="js/three.min.js"></script>
    <script>
        console.log('开始3D测试...');
        
        // 检查Three.js是否加载
        if (typeof THREE === 'undefined') {
            console.error('Three.js未加载');
            document.getElementById('info').innerHTML = '<h3>错误：Three.js未加载</h3>';
        } else {
            console.log('Three.js已加载，版本:', THREE.REVISION);
        }

        // 创建场景
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x87CEEB);
        console.log('场景已创建');

        // 创建相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5;
        console.log('相机已创建');

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        console.log('渲染器已创建');

        // 添加到容器
        const container = document.getElementById('container');
        container.appendChild(renderer.domElement);
        console.log('渲染器已添加到容器');

        // 创建几何体
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        cube.castShadow = true;
        scene.add(cube);
        console.log('立方体已创建');

        // 创建数字人模型
        createDigitalHuman();

        // 添加光照
        const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
        scene.add(ambientLight);

        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
        directionalLight.position.set(5, 5, 5);
        directionalLight.castShadow = true;
        scene.add(directionalLight);
        console.log('光照已添加');

        // 创建地面
        const groundGeometry = new THREE.PlaneGeometry(20, 20);
        const groundMaterial = new THREE.MeshLambertMaterial({ color: 0x90EE90 });
        const ground = new THREE.Mesh(groundGeometry, groundMaterial);
        ground.rotation.x = -Math.PI / 2;
        ground.position.y = -2;
        ground.receiveShadow = true;
        scene.add(ground);
        console.log('地面已创建');

        // 动画循环
        function animate() {
            requestAnimationFrame(animate);
            
            // 旋转立方体
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            
            // 旋转数字人
            if (window.digitalHuman) {
                window.digitalHuman.rotation.y += 0.005;
            }
            
            renderer.render(scene, camera);
        }

        // 窗口大小调整
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

        // 创建数字人函数
        function createDigitalHuman() {
            console.log('开始创建数字人...');
            
            const human = new THREE.Group();
            
            // 头部
            const headGeometry = new THREE.SphereGeometry(1, 32, 32);
            const headMaterial = new THREE.MeshLambertMaterial({ color: 0xFFDBB5 });
            const head = new THREE.Mesh(headGeometry, headMaterial);
            head.position.y = 0.5;
            head.castShadow = true;
            human.add(head);
            
            // 身体
            const bodyGeometry = new THREE.CylinderGeometry(0.8, 0.6, 1.5, 16);
            const bodyMaterial = new THREE.MeshLambertMaterial({ color: 0x4A90E2 });
            const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
            body.position.y = -0.5;
            body.castShadow = true;
            human.add(body);
            
            // 头发
            const hairGeometry = new THREE.SphereGeometry(1.1, 16, 16, 0, Math.PI * 2, 0, Math.PI * 0.6);
            const hairMaterial = new THREE.MeshLambertMaterial({ color: 0x8B4513 });
            const hair = new THREE.Mesh(hairGeometry, hairMaterial);
            hair.position.y = 0.7;
            hair.rotation.x = Math.PI * 0.1;
            human.add(hair);
            
            // 眼睛
            const eyeGeometry = new THREE.SphereGeometry(0.1, 16, 16);
            const eyeMaterial = new THREE.MeshLambertMaterial({ color: 0x000000 });
            
            const leftEye = new THREE.Mesh(eyeGeometry, eyeMaterial);
            leftEye.position.set(-0.3, 0.6, 0.8);
            human.add(leftEye);
            
            const rightEye = new THREE.Mesh(eyeGeometry, eyeMaterial);
            rightEye.position.set(0.3, 0.6, 0.8);
            human.add(rightEye);
            
            // 嘴巴
            const mouthGeometry = new THREE.SphereGeometry(0.15, 16, 16, 0, Math.PI * 2, 0, Math.PI * 0.5);
            const mouthMaterial = new THREE.MeshLambertMaterial({ color: 0x8B0000 });
            const mouth = new THREE.Mesh(mouthGeometry, mouthMaterial);
            mouth.position.set(0, 0.2, 0.8);
            mouth.rotation.x = Math.PI;
            human.add(mouth);
            
            scene.add(human);
            window.digitalHuman = human;
            
            console.log('数字人已创建并添加到场景');
        }

        // 开始动画
        animate();
        console.log('动画循环已启动');
    </script>
</body>
</html>
